import React from "react";
import {ITodoInput} from "../interface";
import {Button, Input, message} from "antd";
import './TodoInput.less'
import * as _ from 'lodash'

const TodoInput: React.FC<ITodoInput> = (props: ITodoInput) => {
    const {addTodo} = props
    const [text, setText] = React.useState('');
    const [messageApi, contextHolder] = message.useMessage();


    async function addTodoHandler() {

        // 判断是否输入输入
        if (_.isEmpty(text)) {
            await messageApi.error("请输入！")
            return
        }

        addTodo(text)
        setText('')
    }

    function handleChangeText(e: { target: { value: React.SetStateAction<string>; }; }) {
        setText(e.target.value)
    }

    return (
        <div className='inputItem'>
            {contextHolder}
            <Input value={text} onChange={handleChangeText}/>
            <Button type="primary" onClick={() => addTodoHandler()}>Add todo</Button>
        </div>
    )
}

export default TodoInput